<script setup lang="ts">
import { storeToRefs } from "pinia";
import type { Ref } from "vue";
import type { Special } from "@/types/homeTypes/homeTypes.ts";
import useHomeStore from "@/pinia/modules/homeStore/homeStore.ts";

const homeStore = useHomeStore();


const { specialList }: { specialList: Ref<Special[]> } = storeToRefs(homeStore);

/*调用函数获取最新专题*/
homeStore.fetchSpecialList(9);

</script>

<template>
   <panel title="最新专题">
      <template #right>
         <more path="/" />
      </template>
      <div class="special-list">
         <div class="special-item" v-for="(item) in specialList" :key="item.id">
            <RouterLink to="/">
               <img v-lazy="item.cover" />
               <div class="meta">
                  <p class="title">
                     <span class="top ellipsis">{{ item.title}}</span>
                     <span class="sub ellipsis">{{item.summary}}</span>
                  </p>
                  <span class="price">{{item.lowestPrice}}起</span>
               </div>
            </RouterLink>
            <div class="foot">
               <span class="like"><i class="iconfont icon-hart1"></i>{{item.replyNum}}</span>
               <span class="view"><i class="iconfont icon-see"></i>{{item.viewNum}}</span>
               <span class="reply"><i class="iconfont icon-message"></i>{{ item.collectNum}}</span>
            </div>
         </div>
      </div>
   </panel>
</template>

<style scoped lang="less">
.panel {
   background: #f5f5f5;
}

.special-list {
   padding-bottom: 20px;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;

   .special-item {
      width: 404px;
      background: #fff;
      margin-bottom: 10px;
      .hoverShadow();

      a {
         display: block;
         width: 100%;
         height: 288px;
         position: relative;

         img {
            width: 100%;
            height: 100%;
         }

         .meta {
            background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent 50%);
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 288px;

            .title {
               position: absolute;
               bottom: 0px;
               left: 0;
               padding-left: 16px;
               width: 70%;
               height: 70px;

               .top {
                  color: #fff;
                  font-size: 22px;
                  display: block;
               }

               .sub {
                  display: block;
                  font-size: 19px;
                  color: #999;
               }
            }

            .price {
               position: absolute;
               bottom: 25px;
               right: 16px;
               line-height: 1;
               padding: 4px 8px 4px 7px;
               color: @priceColor;
               font-size: 17px;
               background-color: #fff;
               border-radius: 2px;
            }
         }
      }

      .foot {
         height: 72px;
         line-height: 72px;
         padding: 0 20px;
         font-size: 16px;

         i {
            display: inline-block;
            width: 15px;
            height: 14px;
            margin-right: 5px;
            color: #999;
         }

         .like,
         .view {
            float: left;
            margin-right: 25px;
            vertical-align: middle;
         }

         .reply {
            float: right;
            vertical-align: middle;
         }
      }
   }
}
</style>
